<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  
</style>

<body>
 
    <div id="app" @click="callBack">
        <template v-for="item in list">
            <children  @change="callBack" @success="callBack" :prop-data="item " :key="item"></children>
        </template>
    </div>
</body>
<script id="children" type="text/html">
    <div>
        <div @click="eventClick(propData)"> 子类 {{ propData }}</div>
    </div>
</script>
<script id="children1" type="text/html">
    <div>
        <div> 哈哈哈 children1</div>
    </div>
</script>
<script src="./bundle.js"></script>
<script>
      

       let vue = new Vue({
        el: '#app',
        data: {
            inputVal: 0,
            select: '3',
            age: 10,
            list: [1, 2, 3, 4, 5, 6]
        },
        filters: {
            filterAge(val,e){
                return val +1
            },
            filterAge1(val){
                return val + 5
            }
        },
        watch: {
            'inputVal'(val){
                console.log(val);
            }
        },
        methods: {
            callBack(e){
                console.log(e);
            },
            randomilize(arr) {
                var length = arr.length;
                var arr1 = new Array();
                for (var i = 0; i < length; i++) {
                    arr1[i] = i;
                }   //建立数组下标数组
                var arr2 = new Array();
                for (var i = 0; i < length; i++) {
                    arr2[i] = arr1.splice(Math.floor(Math.random() * arr1.length), 1);
                }  //将数组下标随机打乱
                var arr3 = new Array();
                for (var i = 0; i < length; i++) {
                    arr3[i] = arr[arr2[i]];
                }  //将数组按打乱后的下标输出
                return arr3;
            },
            eventClick() {
               //this.list.pop()
               const list = this.randomilize(this.list)
               console.log(list);
               this.list = list
               this.$nextTick(()=>{
                   console.log(this);
               })
            }
        },
        components: {
            children: {
                props: ['propData'],
                mounted(){
                    console.log(this);
                },
                methods: {
                    eventClick(e){
                        this.$emit('success',e+'s')
                    }
                },
                template: document.getElementById('children').innerHTML
            },
            children1: {
                data() {
                    return {
                        sex: '1'
                    }
                },
                mounted() {
                    console.log(1);
                },
                template: document.getElementById('children1').innerHTML
            }
        }
    })
    console.log(vue );
</script>

</html>